<template>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
      :page-size='pageSize'
      :total="total"
      :hide-on-single-page= true>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'PaginationTp',
  props: [
    'dataForm',
  ],
  data () {
    return {
      pageSize: '', // 页面容量
      apiName: '', // api
      currentPage: '', // 当前页
      total: 0, // 总量
      ptype: ''  // 类型
    }
  },
  created() {
    this.pageSize = this.dataForm.pageSize;
    this.apiName = this.dataForm.apiName;
    this.currentPage = this.dataForm.currentPage;
    if(this.ptype){
      this.ptype = this.dataForm.ptype;
    }
    this.getData(this.currentPage);
  },
  methods: {
    // 点击
    handleCurrentChange(val){
      this.currentPage = val;
      this.getData(val);
    },
    // 上一页
    handlePrevClick(val){
      this.getData(val);
    },
    // 下一页
    handleNextClick(val){
      this.getData(val);
    },
    // 获取数据 
    getData(val){
      let params = {
        currentPage: val,
        pageSize: this.pageSize,
        ptype: this.ptype,
      }
      this.api[this.apiName](params).then(res => {
        let {code, message, data} = res;
        if(['200', 200].includes(code) && res.success == true) {
          this.total = res.total;
          console.log(data);
          this.$emit('sendData',data);
        }
        else {
            this.$message({
                type: "info",
                message: message
            })
        }
      }).catch(err => {
          this.$message({
              type: "info",
              message: err
          })
      })
    },
    
  },
}
</script>

<style scoped>
.pagination{
  margin: 40px;
}
</style>